<template>
  <div class="container">
    <div class="title">{{video.name}}</div>
    <div class="player">
      <video-player class="video-player vjs-custom-skin"
        ref="palyer"
        :playsinline="false"
        :options="playerOptions"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @statechanged="playerStateChanged($event)"
      >
      </video-player>
    </div>
    <ul class="video-site" v-if="video && video.video.length > 1">
      <li v-for="(item, index) in video.video" :key="index" @click="siteClick(item, index)" :class="currentIndex == index && 'active'">
        <img :src="video.img" alt="">
        {{video.name}}{{index + 1}}
      </li>
    </ul>
  </div>
</template>

<script>
  import VideoData from './data.js'
  export default {
    data() {
      return {
        video: '',
        currentIndex: 0,
        playerOptions: {
          playbackRates: [1.0], //播放速度
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [],
          poster: VideoData.videoList[this.$route.params.index].img, // 你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            progressControl: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        }
      }
    },
    methods: {
      playerStateChanged(e) {
      },
      onPlayerPause(e) {

      },
      onPlayerPlay() {

      },
      siteClick(url, index) {
        if (this.currentIndex != index) {
          this.currentIndex = index;
          this.playerOptions.sources = [
            {
              type: 'video/mp4',
              src: this.video.video[url]
            }
          ]
          this.$refs.palyer.player.load(url)
          this.$refs.palyer.player.play();
        }
      }
    },
    mounted() {
      this.video = VideoData.videoList[this.$route.params.index];
      // this.video.video.forEach((item) => {
      //   this.playerOptions.sources.push({
      //     type:'video/mp4',
      //     src: item
      //   })
      // })
      this.playerOptions.sources = [
        {
          type: 'video/mp4',
          src: this.video.video[0]
        }
      ]
    }
  }
</script>

<style scoped>
.container {
  background-color: #fff;
  min-height: 100%;
}
.title {
  padding: 20px 0;
  font-weight: bold;
}
.video-site  {
  padding: 30px 0;
}
.video-site li {
  display: inline-block;
  width: 20%;
  padding: 10px 5px;
  cursor: pointer;
}
.video-site li:hover {
  box-shadow:0 0px 2px rgba(0, 0, 0, 0.5);
}
.video-site li.active {
  box-shadow:0 0px 2px rgba(0, 0, 0, 0.5);
}
.video-site li>img {
  width: 100%;
}
</style>